<template>
	<view class="w-1 p-30" v-if="info">

		<view class="fr-s-c p-30 bg-ff br-20 ">
			<image :src="$dimg(info.goods[0].goodimg)" class="br-20" style="width: 152rpx; height: 152rpx;"
				mode="aspectFill"></image>
			<view class="flex-1 fl-s-s m-l-20" style="height: 152rpx;">
				<text class="text-line-2 c-00 m-t-10 fs-28 bold">{{info.goods[0].title}}</text>
				<text class="m-t-15 fs-24 c-99">{{info.sku}}</text>
			</view>
		</view>

		<view class="fl-s-s bg-ff br-20 m-t-20">
			<view class="w-1 fr-s-c" style="padding: 30rpx 20rpx;"
				@click="$to('/pages/User/Address/Address?choose=1&ekey=setads')">
				<view class="flex-1" :class="ainfo?'fl-s-s':'fr-s-c'">
					<block v-if="ainfo">
						<view class="fr-s-c">
							<up-icon name="map-fill" color="#01796d"></up-icon>
							<text
								class="flex-1 t-r c-33 fs-24 m-l-10">{{ainfo.residevice + ainfo.residecity+ ainfo.residedist}}</text>
						</view>
						<view class="fr-s-c m-t-10">
							<up-icon style="opacity: 0;" name="map-fill" color="#01796d"></up-icon>
							<text class="m-l-10 c-33 fs-32 bold">{{ainfo.address}}</text>
						</view>
						<view class="fr-s-c m-t-10">
							<up-icon style="opacity: 0;" name="map-fill" color="#01796d"></up-icon>
							<text class="c-33 fs-24 m-l-10">{{ainfo.name+'（'+ainfo.tel+'）'}}</text>
						</view>

					</block>
					<block v-else>
						<text class="c-33 fs-32 bold">上门地址</text>
						<text class="flex-1 t-r c-99 fs-30">请选择上门地址</text>
					</block>
				</view>
				<up-icon name="arrow-right"></up-icon>
			</view>
			<view class="w-1 bb-solid"></view>
			<view class="w-1 fr-b-c" @click="showtime" style="padding: 30rpx 20rpx;">
				<view class="fr-s-c">
					<up-icon size="30rpx" name="clock"></up-icon>
					<text class="c-33 m-l-10 fs-24">期望上门时间</text>
				</view>
				<view class="fr-s-c">
					<text class="c-77 m-l-10 fs-24">{{info.reservtime}}</text>
					<up-icon size="30rpx" name="arrow-right"></up-icon>
				</view>
			</view>
		</view>


		<view style="height: 250rpx;"></view>
		<view class="w-1 bg-ff iphonex">
			<view class="w-1 p-30 fr-b-c">
				<view class="cancel fr-c" @click="back">取消</view>
				<view class="sure fr-c" @click="sub">确定</view>
			</view>
		</view>



		<up-popup v-model:show="show" closeable round="20rpx">
			<view class="w-1 fl-s-c">
				<text class="c-00 p-30 fs-32 bold">期望上门时间</text>
				<view class="w-1 fr-s-s">
					<scroll-view scroll-y="true" class="" style="width: 332rpx; height: 645rpx;">
						<view class="fr-c" @click="(curd=index,ctitle='',showtime())"
							:class="curd==index?'lboxact':'lbox'" v-for="(item,index) in dlist" :key="index">
							{{item.title}}
						</view>
					</scroll-view>
					<scroll-view scroll-y="true" class="flex-1" style="height: 645rpx; padding-left: 20rpx;">
						<block v-for="(item,index) in rlist" :key="index">
							<view class="fl-s-s" v-if="item.show">
								<text class="c-00 fs-28 bold m-b-20">{{item.title}}</text>
								<block v-for="(items,indexs) in item.child" :key="indexs">
									<view v-if="items.show" :class="ctitle==items.title?'rboxact':'rbox'"
										@click="ctitle=items.title" class="fr-c m-b-20">{{items.title}}</view>
								</block>
							</view>
						</block>
					</scroll-view>
				</view>
				<view class="p-30 fr-b-c w-1" style="box-shadow: 0rpx -6rpx 8rpx 2rpx rgba(0,0,0,0.07);">
					<view class="cancel fr-c" @click="show=false">取消</view>
					<view class="sure fr-c" @click="suredatetime">确定</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	const info = ref('')
	const dlist = ref([])
	const curd = ref(0)
	const sn = ref('')
	onLoad(o => {
		sn.value = o.sn || ''
		getinfo()
		getFormattedDates()
		uni.$on('setads', setainfo)
	})
	onUnload(() => {
		uni.$off('setads')
	})

	function back(){
		uni.navigateBack()
	}

	// 左侧日期
	function getFormattedDates() {
		const today = new Date();
		const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
		const dates = [];
		for (let i = 0; i < 7; i++) {
			const date = new Date(today);
			date.setDate(today.getDate() + i);
			const year = date.getFullYear()
			const month = (date.getMonth() + 1).toString().padStart(2, '0');
			const day = date.getDate().toString().padStart(2, '0');
			let label;
			const weekDay = weekDays[date.getDay()];
			if (i === 0) {
				label = '今天';
			} else if (i === 1) {
				label = '明天';
			} else {
				label = `周${weekDay}`;
			}

			dates.push({
				title: `${month}月${day}日(${label})`,
				val: year + '-' + month + '-' + day,
				name: `${month}月${day}日(周${weekDay})`
			});
		}
		dlist.value = dates;
		// return dates;
	}


	// 右侧时间
	const rlist = ref([{
		title: '上午',
		show: true,
		child: [{
			title: '08:00~10:00',
			show: true,
		}, {
			title: '10:00~12:00',
			show: true,
		}]
	}, {
		title: '下午',
		show: true,
		child: [{
			title: '12:00~14:00',
			show: true,
		}, {
			title: '14:00~16:00',
			show: true,
		}, {
			title: '16:00~18:00',
			show: true,
		}]
	}, {
		title: '晚上',
		show: true,
		child: [{
			title: '18:00~20:00',
			show: true,
		}, {
			title: '20:00~22:00',
			show: true,
		}, {
			title: '22:00~24:00',
			show: true,
		}]
	}])

	import {
		timeFormat
	} from '@/uni_modules/uview-plus';

	function showtime() {
		let date = timeFormat(Date.now())
		let hm = timeFormat(Date.now(), 'hh:MM')
		console.log(date)
		console.log(hm)
		if (curd.value == 0) {
			if (hm > '12:00') {
				rlist.value[0].show = false;
			} else {
				rlist.value[0].child.map(i => {
					i.show = i.title.split('~')[1] > hm;
				})
			}
			if (hm > '18:00') {
				rlist.value[1].show = false;
			} else {
				rlist.value[1].child.map(i => {
					i.show = i.title.split('~')[1] > hm;
				})
			}
			if (hm > '24:00') {
				rlist.value[2].show = false;
			} else {
				rlist.value[2].child.map(i => {
					i.show = i.title.split('~')[1] > hm;
				})
			}
		} else {
			rlist.value.map(i => {
				i.show = true;
				i.child.map(it => it.show = true)
			})
		}
		console.log(rlist.value)
		show.value = true;
	}


	const ctitle = ref('')
	function suredatetime() {
		if (!ctitle.value) return uni.$u.toast('请选择上门时间');
		info.value.reservtime = dlist.value[curd.value].name + ' ' + ctitle.value
		show.value = false
	}



	// 订单信息
	function getinfo() {
		uni.$post({
			url: '/api/Ordersystem/sworderlis',
			data: {
				ordersn: sn.value,
				op: 1
			}
		}).then(res => {
			info.value = res.data;
			ainfo.value = {
				address: res.data.address,
				id: res.data.addressid,
				name: res.data.username,
				tel: res.data.mobile,
				residevice: res.data.residevice,
				residecity: res.data.residecity,
				residedist: res.data.residedist
			}
		})
	}

	// 地址信息
	const ainfo = ref('')

	function setainfo(val) {
		console.log(val, 'ainfo')
		ainfo.value = val;
		form.value.did = val.id
	}

	const show = ref(false)
	const value = ref(1)
	const pay = ref(null)
	const ordersn = ref('')

	function sub() {
		uni.$post({
			url: '/api/Ordersystem/ordermodifyappoint',
			data: {
				orderid:info.value.id,
				did:ainfo.value.id,
				reservtime:info.value.reservtime
			}
		}).then(res => {
			getApp().tt('修改成功','success');
			uni.$emit('reorder');
			uni.$emit('red2');
			uni.$delayBack()
		})
	}


</script>

<style scoped>
	page {
		background: #f1f5f6;
	}

	.label {
		min-width: 96rpx;
		height: 36rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		border: 2rpx solid #E24700;
		font-size: 22rpx;
		color: #E24700;
	}

	.skubox {
		height: 122rpx;
		background: #F5F5F5;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.ltnum {
		width: 72rpx;
		padding: 0 10rpx;
		height: 38rpx;
		background: #FF6201;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 38rpx;
		text-align: center;
	}


	.lbox {
		width: 322rpx;
		height: 92rpx;
		background: #E9E9E9;
		border: 2rpx solid #FFFFFF;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}

	.lboxact {
		width: 322rpx;
		height: 92rpx;
		background: #FFFFFF;
		border: 2rpx solid #FFFFFF;
		font-weight: bold;
		font-size: 28rpx;
		color: #01796D;
		text-align: center;
	}

	.rbox {
		width: 376rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #E9E9E9;
		font-size: 28rpx;
		color: #262626;
	}

	.rboxact {
		width: 376rpx;
		height: 92rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #01796D;
		font-weight: bold;
		font-size: 28rpx;
		color: #01796D;
	}

	.pitems {
		height: 80rpx;
		background: #f8f8f8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0 35rpx;
	}

	.cancel {
		width: 330rpx;
		height: 100rpx;
		background: #FFFFFF;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 2rpx solid #E9E9E9;
		font-size: 32rpx;
		color: #A7A6A7;
	}

	.sure {
		width: 330rpx;
		height: 100rpx;
		background: #01796D;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}


	.qt {
		width: 630rpx;
		height: 192rpx;
		background: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>